<template>
  <div class="question">
    <el-card class="box-card">
      <el-row type="flex" justify="end">
        <el-col :span="18"
          ><h3 v-if="AddisShow" class="font">
            {{ isedit ? "增加试题" : "编辑试题" }}
          </h3></el-col
        >
        <el-col :span="6" :push="4">
          <el-button
            type="primary"
            plain
            size="small"
            class="btn"
            @click="isShow"
            >{{ !AddisShow ? "增加试题" : "返回列表" }}</el-button
          ></el-col
        >
      </el-row>
      <AddPageList v-if="AddisShow" ref="editData" @CloseAdd="CloseAdd" />
      <ListManger v-else @edit="edit($event)" />
    </el-card>
  </div>
</template>
<script>
import ListManger from "./components/ListManger.vue";
import AddPageList from "./components/AddPageList.vue";
import { addQuestionDetail } from "@/api/exam/question";
export default {
  name: "Question",
  components: { ListManger, AddPageList },
  props: {},
  data() {
    return {
      AddisShow: false,
      QuestionQuery: {},
      isAdd: false,
      isedit: true,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    isShow() {
      this.AddisShow = !this.AddisShow;
    },
    CloseAdd(CloseAdd) {
      this.AddisShow = CloseAdd;
    },
    async edit(event) {
      this.AddisShow = !this.AddisShow;

      const { data } = await addQuestionDetail(event);
      this.$nextTick(() => {
        this.$refs.editData.isAdd = false;
        this.isedit = false;
        this.$refs.editData.query = { ...data };
        console.log(data);
        this.$refs.editData.tagLists = { ...data.tag_id };
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.question {
  background-color: #ccc;
  .box-card {
    background-color: #fff;
    .btn {
      margin-bottom: 10px;
    }
    .font {
      margin-bottom: 20px;
    }
  }
}
</style>
